import React, { useEffect, useState } from 'react'
import { Layout, Row, Col, Progress } from 'antd'
const { Content, Footer, Header, Sider } = Layout
import { ipcRenderer } from 'electron'
const Recorder = require('js-audio-recorder')
import { ipctype } from '../../main/interface';
import { AudioOutlined, ReloadOutlined } from '@ant-design/icons';
import audioleft from '../../assets/audioleft.png'
import audioright from '../../assets/audioright.png'
import { Zwifi } from '../demo'

type Props = {
    text: string,
    display: "block" | "none",
    seticon: (icon: string) => void,
    setdis: (display: "block" | "none") => void,
    bashou: string,
    icon?: string,
    fullscreen(): void,
    replace(): void,
    wifi: number
}



export default function (prop: Props) {
    const [imageclass, setimageclass] = useState('image-c')
    const { text, icon, fullscreen, replace, wifi } = prop

    const [recorder] = useState(new Recorder({
        sampleBits: 16,
        sampleRate: 16000,
        numChannels: 1,
    }))
    function mousedown() {
        recorder.start()
        setimageclass('image-e')
    }


    async function mouseup() {
        setimageclass('image-c')
        const data: Blob = recorder.getPCMBlob()
        const buffers = await data.arrayBuffer()
        prop.seticon('#icondengdai')
        ipcRenderer.send(ipctype['audio-buffer'], buffers)
    }

    const z: Zwifi[] = [{
        color: '#52c41a',
        percent: 25,
    },
    {
        color: '#00ff00',
        percent: 58,
    },
    {
        color: '#26d8f1',
        percent: 100,
    }
    ]

    const [x, setx] = useState(z[2])
    const [n, setn] = useState(wifi)

    useEffect(() => {
        if (wifi < 100) {
            setx(z[2])
        } else if (wifi < 1000) {
            setx(z[1])
        } else {
            setx(z[0])
        }
        if (wifi > 9999) {
            setn(9999)
        }
    }, [wifi])

    useEffect(() => {
        return () => {
            recorder.destroy()
        }
    }, [10])




    return <>
        <Header onDoubleClick={fullscreen}>
            <div className="header-right">
                <Layout>
                    {n === 9999 ?
                        <Sider width="270" style={{ textAlign: 'center' }} className="wifi">
                            <span style={{ paddingRight: '20px', display: 'inline-block' }} >
                                网络超时
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#iconxinhao-signal-fill"></use>
                                </svg>
                            </span>
                            <span className="text-danger">
                                0ms
                            <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#iconduanwang"></use>
                                </svg>
                            </span>
                        </Sider>
                        :
                        <Sider width="270" className="wifi">
                            网络延迟
                            <span>
                                <Progress percent={x.percent} steps={3} size="small" showInfo={false} strokeColor={x.color} ></Progress>
                                {n}ms
                            </span>
                        </Sider>
                    }
                    <Content onClick={replace} className="rex">
                        <ReloadOutlined />
                    &nbsp;
                重启
            </Content>
                </Layout>
            </div>
        </Header>
        <Content className="left" id="audioleft">
            <Row  >
                <Col span={12} >
                    <div className={"img  position-relative " + imageclass} >
                        <div className="position-absolute abget " >
                            <svg className="icon" aria-hidden="true">
                                <use xlinkHref={icon ? icon : "#iconluyin"}></use>
                            </svg>
                        </div>
                        <AudioOutlined className="icon icon1" onMouseDown={mousedown} onTouchStart={mousedown} onTouchEnd={mouseup} onMouseUp={mouseup} />
                    </div>
                </Col>
                <Col span={12} >
                    <div className="img image-d" >
                        <h3>识音结果</h3>
                        <div className="text">
                            {
                                text
                            }
                        </div>

                    </div>

                </Col>
            </Row>
        </Content >
        <Footer >
            <Row>
                <Col span={12} className="text-center">
                    <img src={audioleft} alt="" />
                </Col>
                <Col span={12} className="text-right">
                    <img src={audioright} alt="" />
                </Col>
            </Row>
        </Footer>
    </>
}